<template>
  <view class="container">
    <view class="top">
      <ul class="top-list">
        <li class="one1">{{location}}自助点</li>
        <!-- 06月09今天11：30-06月11日周日11：30 -->
        <li class="one2">{{time}}</li>
      </ul>
      <image class="top-location" src="../../static/location.png" width="3px" height="3px"></image>
    </view>
    <view class="body">
      <view class="body-left">
        <scroll-view scroll-y="true" class="body-left-list">
          <li class="two" :class="['native',i===active ? 'active' : '']" v-for="(item,top) in bodyleft" :key="item.top"
            @click="clickNav(item.top)">
            <ul>
              <li>{{item.top}}</li>
              <li>{{item.foot}}</li>
            </ul>
          </li>
        </scroll-view>
      </view>
      <scroll-view scroll-y="true" class="body-right">
        <view class="body-right-car" v-for="(item, index) in cars" :key="item.C_ID"
          @click="gotoDetail(item.C_ID,item.C_Image)">
          <view class="car-top">
            <image class="car" :src="item.C_Image"></image>
            <view class="car-top-right">
              <ul class="car-top-list">
                <li class="three1">{{item.C_Brand}}</li>
                <li class="three2">{{item.C_Oil}}.0自动 | 三厢{{item.C_Seat}}座</li>
              </ul>
            </view>
          </view>
          <view class="car-foot">
            <view class="car-foot-left">
              <view class="car-foot1">
                <view class="text2">汽车详情</view>
                <image class="XiangQing" src="../../static/caret-right-small.png"></image>
              </view>
              <view class="car-foot2">
                <view class="text2">汽车日历</view>
                <image class="XiangQing" src="../../static/caret-right-small.png"></image>
              </view>
            </view>
            <view class="car-foot-right">
              <view class="price1">￥{{item.C_Price}}</view>
              <view class="price2">/日均</view>

            </view>
          </view>
        </view>
        <view class="body-right-car"
          style="background-color: rgba(234, 231, 224); text-align: center; border: 0;color: crimson;font-size: larger;height: 80px;">
          没有啦！
        </view>
      </scroll-view>
    </view>
    <view class="foot">
      <view class="foot-left">
        <!-- 第一个弹框内容 v-show="show"-->
        <view class="uniappBox" v-if="show">
          <view class="uniappContant">
            <view class="uniappTitle">筛选条件</view>
            <view class="underline"></view>
            <view class="uniappNotice">
              <view class="uniappNotice-title">价格区间(元)</view>
              <view class="uniappNotice-content">
                <!-- <view class="uniappNotice-content-price">不限</view>
                <view class="uniappNotice-content-price">0-200</view>
                <view class="uniappNotice-content-price">200-300</view>
                <view class="uniappNotice-content-price">300-500</view>
                <view class="uniappNotice-content-price">500以上</view> -->
                <view class="bottom-text">所以汽车价格区间均在0-200元内！</view>
              </view>
            </view>
            <!-- 确定取消按钮 -->
            <view class="uniappBtn">
              <!-- <view @click="concel()">取消</view> -->
              <view @click="confirm()">确定</view>
            </view>
          </view>
          <!-- 背景黑色蒙版 -->
          <view class="uniappBgdCol" @click="shadow()"></view>
        </view>
        <!-- 第二个弹窗，v-show=show2 -->
        <view class="uniappBox2" v-if="show2">
          <view class="uniappContant2">
            <view class="uniappTitle">排序</view>
            <view class="underline"></view>
            <view class="uniappNotice2">
              <view class="uniappNotice-content2">
                <view class="uniappNotice-content-sort" @click="first">默认排序</view>
                <view class="uniappNotice-content-sort" @click="second('Asc')">低价优先</view>
                <view class="uniappNotice-content-sort2" @click="second('Desc')">高价优先</view>
              </view>
            </view>
          </view>
          <!-- 背景黑色蒙版 -->
          <view class="uniappBgdCol2" @click="shadow2()"></view>
        </view>
        <image src="../../static/saixuan.png"></image>
        <view class="text3" @click="showModel()">筛选</view>
      </view>
      <view class="foot-middle">|</view>
      <view class="foot-right">
        <image src="../../static/moren.png"></image>
        <view class="text3" @click="showModel2()">默认排序</view>
      </view>
    </view>
  </view>
</template>

<script>
  import store from '@/store/index.js' //需要引入store
  export default {
    data() {
      return {
        cars: [],
        time: '2020-12-12 05-20',
        location: '华东交通大学',
        show: false, //默认不显示
        show2: false,
        catelist: [],
        bodyleft: [{
            top: '全部',
            foot: '19款可租',
          },

          {
            top: '奥迪',
            foot: '￥118起'
          },
          {
            top: '比亚迪',
            foot: '￥198起'
          },
          {
            top: '奥迪',
            foot: '￥143起'
          },
          {
            top: '雅迪',
            foot: '￥363起'
          },
          {
            top: '比亚迪',
            foot: '￥378起'
          },
        ],
        active: 0,
      }
    },
    methods: {
      clickNav(top) {
        if (top === '全部') {
          this.cars = this.allCars()
        } else {
          // this.active = top
          this.getCarList(top)
        }
      },
      // 点击确定按钮模态框消失
      confirm() {
        this.show = false
      },
      showModel() {
        this.show = true
      },
      showModel2() {
        this.show2 = true
      },
      concel() {
        this.show = false
      },
      shadow() {
        this.show = false
      },
      shadow2() {
        this.show2 = false
      },
      first() {
        this.show2 = false
        this.allCars()
      },
      // 低价
      async second(val) {
        this.show2 = false
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/getCarsByAscOrDesc',
          method: 'post',
          data: { ByAscOrDesc: val },
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
        })
        console.log(res.data)
        this.cars = []
        // var arr = []; //定义数组

        for (var i in res.data) {
          this.cars.push(res.data[i])
        }
        // 再添加一个空对象进入数组中，用来占空间
      },

      // 获取后端 汽车信息数据
      async getCarList(top) {
        console.log(top)
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/carListByBrand',
          method: 'POST',
          data: {
            brand: top
            //orderNum: 1
          },
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
        })
        console.log(res.data)
        this.cars = []

        // var arr = []; //定义数组
        for (var i in res.data) {
          this.cars.push(res.data[i])
        }
        console.log('this.cars' + this.cars)

      },
      // 根据是商家登录还是用户登录，获取不同的汽车信息
      async allCars() {
        // let urlq = ''
        // let method1 = ''
        // // 如果是用户登录
        // if (store.state.admin === {}) {
        //   urlq = 'http://127.0.0.1:3007/api/carList'
        //   method1 = 'get'
        // } else {
        //   // 如果是商家登录
        //   urlq = 'http://127.0.0.1:3007/api/carListByRent'
        //   method1 = 'post'

        // }
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/carListByRent',
          method: 'post',
          data: { state: 1 },
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
        })
        console.log(res.data)
        this.cars = []
        var obj = {}
        // var arr = []; //定义数组
        for (var i in res.data) {
          this.cars.push(res.data[i])
        }
        // this.cars.push(obj)
        console.log('this.cars' + this.cars)
      },
      gotoDetail(id, img) {
        uni.navigateTo({ url: `/subpkg/chooseCar/chooseCar?id=${id}&image=${img}` })
        console.log(id, img)
      }
    },
    onLoad(option) {
      if (store.state.address !== '') {
        this.location = store.state.address
      }

      if (option.id !== undefined) {
        this.location = option.location
        this.time = option.time
      }
      this.cars = this.allCars()
      // this.location = props.location
      // this.getCarList()
      console.log('this.location' + this.location)
      // console.log(option.time)
    },

  }
</script>
<style>
  .container {
    background-color: rgb(234, 231, 224);
  }

  .top {
    background-color: orange;
    height: 50px;
    width: 100%;
    border-radius: 5px;
    display: flex;
    position: fixed;
    top: 0;
  }

  .top-list {
    margin-top: 8px;
    margin-left: 83px;
  }

  .one1 {
    font-size: 15px;
    text-align: center;
  }

  .one2 {
    font-size: 10px;
    text-align: center;
  }

  .top-location {
    position: right;
    height: 15px;
    width: 15px;
    margin-top: 10px;
    margin-left: 50px;
  }

  .body {
    margin-top: 5px;
    display: flex;
  }

  .body-left {
    height: 406px;
    width: 22%;
    background-color: white;
    position: fixed;
    top: 55px;
  }


  .body-left-list {
    height: 350px;
    width: 100%;
  }

  .two {
    border: 50px;
    height: 60px;
    text-align: center;
    font-size: 13px;
  }

  .two.active {
    background-color: rgb(234, 231, 224);
    position: relative;
  }

  .two.active::before {
    content: '';
    display: block;
    width: 5%;
    height: 48px;
    background-color: red;
    opacity: 0.35;
    position: absolute;
    top: 10%;
    left: 0;
  }

  .body-right {
    height: 450px;
    width: 77%;
    margin-top: 52px;
    margin-left: 76px;
    background-color: rgb(234, 231, 224);
  }

  .body-right-car {
    height: 145px;
    border: 1px solid white;
    border-radius: 10px;
    margin-top: 5px;
    background-color: white;
  }

  .car-top {
    margin-top: 10px;
    height: 80px;
    display: flex;
  }

  .car-top image {
    height: 80px;
    width: 53%;
  }

  .car-top-right {
    width: 47%;
    height: 80px;
    margin-left: 1px;
    text-align: center;
  }

  .three1 {
    font-size: 18px;
    margin-top: 15px;
  }

  .three2 {
    font-size: 12px;
  }

  .car-foot {
    height: 60px;
    margin-top: 10px;
    display: flex;
  }

  .car-foot-left {
    width: 65%;
    display: flex;
  }

  .car-foot1 {
    background-color: rgb(234, 231, 224);
    border: 1px solid white;
    border-radius: 5px;
    width: 100px;
    height: 27px;
    margin-left: 3px;
    display: flex;
  }

  .text2 {
    font-size: 10px;
    margin-top: 5px;
  }

  .XiangQing {
    position: right;
    height: 25px;
    width: 20px;
    margin-left: 5px;
  }

  .car-foot2 {
    background-color: rgb(234, 231, 224);
    margin-left: 5px;
    border: 1px solid white;
    border-radius: 5px;
    width: 100px;
    height: 27px;
    display: flex;
  }

  .car-foot-right {
    position: right;
    margin-left: 3px;
    width: 95px;
    height: 27px;
    display: flex;
  }

  .price1 {
    font-size: 18px;
    margin-top: 5px;
    color: orange;
  }

  .price2 {
    font-size: 9px;
    margin-top: 14px;
  }

  .foot {
    margin-top: 3px;
    display: flex;
    height: 42px;
    border: 1px, solid, white;
    border-radius: 5px;
    background-color: white;
    position: fixed;
    top: 458px;
    width: 100%;
  }

  .foot-left {
    display: flex;
    margin-left: 50px;
    margin-top: 10px;
  }

  .foot-left image {
    height: 15px;
    width: 15px;
    margin-top: 5px;
  }

  .foot-middle {
    margin-top: 5px;
    margin-left: 47px;
    font-size: 23px;
  }

  .foot-right {
    display: flex;
    margin-left: 40px;
    margin-top: 10px;
  }

  .foot-right image {
    height: 15px;
    width: 15px;
    margin-top: 5px;
    margin-left: 17px;
  }

  .uniappBgdCol {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 99;
    -moz-opacity: 0.6;
    opacity: 0.2;
    filter: alpha(opacity=88);
  }

  .uniappNotice-title {
    margin-top: 15px;
    margin-left: 10px;
  }

  .uniappContant {
    position: fixed;
    top: 275px;
    left: 0px;
    width: 318.5px;
    height: 230px;
    background-color: white;
    z-index: 100;
    border-radius: 10rpx;
  }

  .uniappContant2 {
    position: fixed;
    top: 275px;
    left: 0px;
    width: 318.5px;
    height: 230px;
    background-color: white;
    z-index: 100;
    border-radius: 10rpx;
  }

  .uniappTitle {
    display: flex;
    margin-left: 10px;
    font-size: 16px;
    font-weight: bold;
    padding: 13px 0rpx;
  }

  .underline {
    margin-top: 3px;
    height: 0;
    width: 100%;
    border-bottom: 3rpx solid bisque;
  }

  .uniappNotice {
    color: #121212;
    display: inline;
    justify-content: center;
    padding: 40rpx 0rpx;
  }

  .uniappNotice-content {
    /* display: grid; */
    margin-left: 35px;
    grid-template-columns: 31% 31% 31%;
    margin-top: 40px;
    margin-bottom: 23px;
    column-gap: 7px;
    row-gap: 7px;
    color: red;
  }

  .uniappNotice-content2 {
    display: inline;
    text-align: center;
  }

  .uniappNotice-content-price {
    border: 1px solid white;
    height: 30px;
    border-radius: 5px;
    text-align: center;
    background-color: rgb(254, 250, 230);
  }

  .uniappNotice-content-sort {
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 3rpx solid bisque;
  }

  .uniappNotice-content-sort2 {
    margin-top: 15px;
    padding-bottom: 10px;
  }

  .uniappBtn {
    display: flex;
    justify-content: space-between;
  }

  .uniappBtn view {
    width: 100%;
    display: flex;
    margin-top: 18px;
    justify-content: center;
    align-items: center;
    padding: 4% 0%;
    font-size: 28rpx;
  }

  .uniappBtn view:first-child {
    background-color: rgb(254, 250, 230);
    border-radius: 0rpx 0rpx 0rpx 10rpx;
  }

  .uniappBtn view:last-child {
    background-color: rgb(254, 209, 10);
    border-radius: 0rpx 0rpx 10rpx 0rpx;
  }

  .uniappBgdCol2 {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 99;
    -moz-opacity: 0.6;
    opacity: 0.2;
    filter: alpha(opacity=88);
  }
</style>